import React, { Component } from 'react'
import { Button } from 'react-vant';
import { Tabs } from 'react-vant';
 class Tab extends Component {
  state = { // state里定义得变量叫状态
      arr:[
            {
              tit:"标题1",
              con:"内容1"
            },
            {
                tit:"标题2",
                con:"内容2"
            },
            {
                tit:"标题3",
                con:"内容3"
            },

      ],
      activeIndex:0
  }
  // 所有定义得方法都要和render平级
  checkIndex(ind){
         console.log(this)
        this.setState({
            activeIndex:ind
        })
  }
  render() {
    return (
      <div>
          {/* <Button>1111</Button>
          {
              this.state.arr&&this.state.arr.length? this.state.arr.map((item,index)=>{
                  return <span key={index} onClick={this.checkIndex.bind(this,index)} className={index==this.state.activeIndex?"active":""}>{item.tit}</span>
              }):"暂无数据"
            //   "暂无数据"是对边界情况得处理
          }
          {/* // 渲染下面的内容区 */}
          {/* {
               this.state.arr&&this.state.arr.length?<div>{this.state.arr[this.state.activeIndex].con}</div>:"暂无数据"
          } */} 


        <Tabs active="active">
            {/* <Tabs.TabPane title="标签 1">内容 1</Tabs.TabPane>
            <Tabs.TabPane title="标签 2">内容 2</Tabs.TabPane>
            <Tabs.TabPane title="标签 3">内容 3</Tabs.TabPane>
            <Tabs.TabPane title="标签 4">内容 4</Tabs.TabPane> */}
            {
                this.state.arr.map((item,index)=>{
                    return  <Tabs.TabPane title={item.tit} key={index}>{item.con}</Tabs.TabPane>
                })
            }
        </Tabs>
      </div>
    )
  }
}
export default Tab

